<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin: 0 auto;
				padding: 0;
			}
			
			input::-moz-placeholder {
				color: #A9A9A9;
			}
			
			#full {
				width: 900px;
			}
			
			#full p {
				margin-top: 20px;
				margin-bottom: 20px;
			}
			
			input {
				line-height: 40px;
				width: 300px;
				padding-left: 40PX;
			}
			
			span {
				margin-left: 10px;
				color: #A9A9A9;
				font-size: 14px;
			}
			
			#email,
			#nickName,
			#pass,
			#rePass,
			#vid {
				background-repeat: no-repeat;
				background-position: 10px center;
				border: 1px solid darkgray;
			}
			
			form p:nth-of-type(5) {
				vertical-align: middle;
			}
			
			form p:nth-of-type(5) input {
				width: 181px;
			}
			
			form p:last-of-type input {
				width: auto;
			}
			
			form p:last-of-type {
				margin-left: 100px;
			}
			
			form p:last-of-type span {
				margin-left: 106px;
			}
			
			#vf {
				vertical-align: middle;
				margin-left: 10px;
				border: 1px solid darkgray;
				height: 40px;
			}
			
			#btn {
				border: 0 none;
				margin-top: 25px;
				margin-left: 73px;
				cursor: pointer;
				width: 200px;
				height: 40px;
				line-height: 40px;
				font-size: 14px;
				border-radius: 8px;
				background-color: #55abe8;
				color: white;
				padding: 0;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script>
			$(function() {
				$("input").click(function() {
					$(this).prop("placeholder", "");
				});

				function checkEmail(v) {
					var contentTxt = $(v).val();
					var standard = /^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
					if(contentTxt.length < 1) {
						$(v).next().html("&otimes;邮箱不能为空");
						$(v).next().css("color", "red")
						return false;
					} else if(!standard.test(contentTxt)) {
						$(v).next().html("&otimes;邮箱格式不正确");
						$(v).next().css("color", "red")
						return false;
					} else {
						$(v).next().text("");
						return true;
					}
				}

				function checkNickName(v) {
					var contentTxt = $(v).val();
					var standard = /^([\u4E00-\u9FA5]|\d|[a-zA-z]){4,12}$/;
					if(contentTxt.length < 1) {
						$(v).next().html("&otimes;昵称不能为空");
						$(v).next().css("color", "red")
						return false;
					} else if(!standard.test(contentTxt)) {
						$(v).next().html("&otimes;输入4-12位字符、英文、数字或者中文");
						$(v).next().css("color", "red")
						return false;
					} else {
						$(v).next().text("");
						return true;
					}
				}

				function checkPassword(v) {
					var contentTxt = $(v).val();
					var standard = /^\w{6,16}$/;
					if(contentTxt.length < 1) {
						$(v).next().html("&otimes;密码不能为空");
						$(v).next().css("color", "red")
						return false;
					} else if(!standard.test(contentTxt)) {
						$(v).next().html("&otimes;输入6-16位字符或数字、字母,区分大小写");
						$(v).next().css("color", "red")
						return false;
					} else {
						$(v).next().text("");
						return true;
					}
				}

				function checkRePassword(v) {
					if($(v).val() != $("#pass").val()) {
						$(v).next().html("&otimes;两次密码输入的不一致");
						$(v).next().css("color", "red")
					} else {
						$(v).next().text("");
					}
				}

				function checkVerification(v) {
					if($(v).val().length < 1) {
						$(v).next().next().html("&otimes;验证码不能为空");
						$(v).next().next().css("color", "red")
					} else {
						$(v).next().next().text("");
					}
				}

				function checkAgree(v) {
					if(!$(v).is(":checked")) {
						$(v).next().next().html("&otimes;请同意服务条款");
						$(v).next().next().css("color", "red");
						return false;
					} else {
						$(v).next().next().html(" ");
						return true;
					};
				}

				$("#email").blur(function() {
					this.placeholder = '请输入您的邮箱';
					checkEmail(this);
				});
				$("#nickName").blur(function() {
					this.placeholder = '请输入昵称';
					checkNickName(this);
				});
				$("#pass").blur(function() {
					this.placeholder = '请输入密码';
					checkPassword(this);
				});
				$("#rePass").blur(function() {
					this.placeholder = '请输入密码';
					checkRePassword(this);
				});
				$("#vid").blur(function() {
					this.placeholder = '请入右侧验证码';
					checkVerification(this);
				});
				$("#agree").click(function() {
					checkAgree(this);
				});
				$("#btn").click(function() {
					var a = checkEmail($("#email"));
					var b = checkNickName("#nickName");
					var c = checkPassword("#pass");
					var d = checkRePassword("#rePass");
					var e = checkVerification("#vid");
					var f = checkAgree("#agree");
					return a && b && c && d && e && f;
				});
			});
		</script>
	</head>

	<body>
		<div id="full">
			<form method="get" action="https://www.baidu.com">
				<p><input type="text" name="email" id="email" placeholder="请输入您的邮箱" style="background-image: url(img/login-input5.png);" /><span>请输入您的常用邮箱</span></p>
				<p><input type="text" name="nickName" id="nickName" placeholder="请输入昵称" style="background-image: url(img/login-input1.png);" /><span>4-12位字符、英文、数字或者中文均可</span></p>
				<p><input type="password" name="pass" id="pass" placeholder="请输入密码" style="background-image: url(img/login-input2.png);" /><span>6-16位字符或数字、字母,区分大小写</span></p>
				<p><input type="password" name="rePass" id="rePass" placeholder="请再次输入密码" style="background-image: url(img/login-input2.png);" /><span></span></p>
				<p><input type="text" name="vid" id="vid" placeholder="请入右侧验证码" style="background-image: url(img/login-input3.png);" /><img src="img/5a3f394349128.png" id="vf"><span>不区分大小写，点击图片可更换</span></p>
				<p><input type="checkbox" name="agree" id="agree" required="required">同意
					<a href="#">用户服务条款</a><span></span></p>
				<input type="submit" value="注册" id="btn" />
			</form>
		</div>
	</body>

</html>